<template>
      <el-form
          :model="form"
          :label-width="80"
          status-icon
      >
        <el-form-item label="会员姓名" >
          <el-input v-model="form.name" placeholder="会员姓名"/>
        </el-form-item>
        <el-form-item label="手机号" >
          <el-input v-model="form.tel" placeholder="手机号" />
        </el-form-item>
        <el-form-item label="性别" >
           <el-radio v-model="form.gender" value="男" size="large">男
            </el-radio>
            <el-radio v-model="form.gender" value="女" size="large">女
            </el-radio>
        </el-form-item>
           <el-form-item label="出生日期" >
              <el-date-picker
                v-model="form.birthday"
                type="date"
                placeholder="yyyy-mm-dd"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 100%"
            />
            </el-form-item>
               <el-form-item label="备注" >
              <el-input v-model="form.remark" type="textarea" />
            </el-form-item>
             <el-form-item v-if="type=='add'">
                <el-button type="primary"  @click="saveMemberContinue">保存,为该会员当定会员卡</el-button>
                <el-button   @click="saveMember">保存会员信息，暂不绑定会员卡</el-button>
               <el-button @click="cancelForm">取消</el-button>
          </el-form-item>
            <el-form-item v-else>
                <el-button type="primary"  @click="updateMember">保存</el-button>
               <el-button @click="cancelForm">取消</el-button>
           </el-form-item>
      </el-form>
</template>

<script setup>
 const {form,active} = defineProps(['form','active','drawer','editMemberDrawer','type'])
 console.log(form)
 //自定义事件
 const $emit = defineEmits(['update:active','update:drawer','update:editMemberDrawer'])

//表单的验证规则
// const rules = reactive({
//     name: [
//         { required: true, message: '请输入会员姓名', trigger: 'blur' },
//         { min: 3, max: 5, message: '长度在 3 to 5', trigger: 'blur' },
//     ],
//     tel: [
//         {
//             required: true,
//             message: 'Please select Activity count',
//             trigger: 'change',
//         },
//     ],

//     gender: [
//         {
//             required: true,
//             message: 'Please select activity resource',
//             trigger: 'change',
//         },
//     ],
// })

//保存按钮  保存 为会员绑定会员卡
const saveMemberContinue = () => {
    //todo。。保存会员信息

    // 跳转到绑定会员的表单
    // active.value = 2 //绑定会员卡
    $emit('update:active',2)
}

////保存会员信息，暂时不绑定会员卡
const saveMember = () => {
    //todo  会员绑定 调用后天接口
    // active.value = 3
     $emit('update:active', 3)
}

//取消按钮
const cancelForm = () => {
    $emit('update:drawer', false)
    $emit('update:editMemberDrawer', false)
    // drawer.value = false
    // editMemberDrawer.value = false

}
//修改会员信息
const updateMember = () => {
  //todo 调用后台接口 保存修改之后的信息 

  console.log('---------修改会员信息--------')
  //修改成功关闭抽屉
   $emit('update:editMemberDrawer', false)
  ElMessage({
    message: '修改成功',
    type: 'success'
  })

}
</script >
<style lang="less" scoped>
</style>